<template>
	<view class="agentShareListContainer">
		<view class="cu-list menu-avatar">
			<!-- <view v-for="(item, index) in list" :key="index" class="cu-item" @click="listItemClick(item)"> -->
				<!-- <image class="cu-avatar lg" :src="item.postImg ? item.postImg : '../../static/defaultImage.png'" mode="aspectFill"></image> -->
				<!-- <view class="content"> -->
					<!-- <view class="text-grey">{{ item.acName }}</view> -->
					<!-- <view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
							{{ item.acDetail }}
						</view>
					</view> -->
				<!-- </view> -->
				<!-- <view class="action action2"><button class="cu-btn round bg-red text-sm" @click.stop="createPoster(item.id)">生成海报</button></view> -->
			<!-- </view> -->
		</view>
		<u-empty margin-top="12" :show="listLength == 0" mode="data"></u-empty>
		<canvas class="canvasCon" style="width: 1170px; height: 1920px;" canvas-id="post" id="post"></canvas>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import { getSharePoster } from './components/QS-SharePoster/QS-SharePoster.js';
export default {
	data() {
		return {
			list: [],
			poster: {},
			postUrl: '',
			modalVisible: false
		};
	},
	computed: {
		listLength() {
			return this.list.length;
		}
	},
	mounted() {
		this.getActivityList()
			.then(res => {
				this.list = [
					{
						id: 1,
						postImg:'http://app.aptenon.com/crm/h5_picture/tenon618.jpg',
						//postImg: 'https://app.aptenon.com/crm/h5_20200901/img/电商01-E.2db5d07d.jpg',
						//qrcodeUrl: 'http://app.aptenon.com/crm/h5_20200901/activity.html?aid=1',
						acName: '6.18活动1'
					},
					{
						id: 2,
						postImg:'http://app.aptenon.com/crm/h5_picture/tenon2.jpg',
						//qrcodeUrl: 'http://app.aptenon.com/crm/h5_20200901/activity.html?aid=1',
						acName: '6.18活动2'
					},
					{
						id: 3,
						postImg:'http://app.aptenon.com/crm/h5_picture/618-A3.jpg',
						//qrcodeUrl: 'http://app.aptenon.com/crm/h5_20200901/activity.html?aid=1',
						acName: '6.18权益海报-A3'
					},
					{
						id: 4,
						postImg:'http://app.aptenon.com/crm/h5_picture/618-A7.jpg',
						//qrcodeUrl: 'http://app.aptenon.com/crm/h5_20200901/activity.html?aid=1',
						acName: '6.18权益海报-A7'
					},
					{
						id: 5,
						postImg:'http://app.aptenon.com/crm/h5_picture/618-A7f.jpg',
						//qrcodeUrl: 'http://app.aptenon.com/crm/h5_20200901/activity.html?aid=1',
						acName: '6.18权益海报-A7f'
					},
					{
						id: 6,
						postImg:'http://app.aptenon.com/crm/h5_picture/618-E3.jpg',
						//qrcodeUrl: 'http://app.aptenon.com/crm/h5_20200901/activity.html?aid=1',
						acName: '6.18权益海报-E3'
					},
					{
						id: 7,
						postImg:'http://app.aptenon.com/crm/h5_picture/618-E11.jpg',
						//qrcodeUrl: 'http://app.aptenon.com/crm/h5_20200901/activity.html?aid=1',
						acName: '6.18权益海报-E11'
					},
				];
			})
			.catch(err => {
				console.log(err);
			});
	},
	methods: {
		...mapActions({
			createPoster: 'activity/createPoster',
			getActivityList: 'activity/getActivityList',
			getAgentCode2:'agent/getAgentCode2',
		}),
		listItemClick(item) {
			// uni.navigateTo({
			// 	url: `/activityPages/agentActivity/agentActivityDetail?aid=${item.id}`
			// });
		},
		confirmClick() {
			this.modalVisible = false;
			this.postUrl = '';
		},
		openModal() {
			this.modalVisible = true;
		},
		saveClick() {
			wx.saveImageToPhotosAlbum({
				filePath: this.postUrl,
				success: function(res) {
					wx.showToast({
						title: '保存成功'
					});
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},
		createPosterCLick(item) {
			console.log(item);
			uni.showLoading({
				mask: true,
				title: '请求中'
			});
			this.createPoster({
				acId: item.id,
				sourceOpenId: this.$store.state.user.userInfo.WxOpenId,
				leadingOpenId: this.$store.state.agent.agentInfo.WxOpenId
			})
				.then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.code == '000000' || res.code == '000015') {
						// uni.navigateTo({
						// 	url: `/agentPages/agent/agentShare?pid=${res.id}`
						// });
						if (res.pbPath) {
							uni.previewImage({
								urls: [res.pbPath]
							});
						} else {
							uni.showToast({
								title: '生成海报路径失败',
								icon: 'none'
							});
						}
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
				});
		},
		
		async createPoster(item) {
			switch(item){
			  case 1:{
				  const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				type: 'testShareType',
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				posterCanvasId: 'post', //canvasId
				delayTimeScale: 20, //延时系数
				backgroundImage: 'https://app.aptenon.com/crm/h5_picture/tenon618.jpg',
				drawArray: ({ bgObj, type, bgScale }) => {
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return new Promise((rs, rj) => {
						this.getAgentCode2({
						scence:this.$store.state.user.userInfo.teamNo
					    })
					    .then(res=>{	
					    console.log(res);
					    	if(res&&res.url){
					    	   return rs([
							   {
								type: 'qrcode',
								// text: `http://weixin.qq.com/q/02Fnf7MiAHake10000g07j`,
								// text:'http://app.aptenon.com/crm/h5_picture/tenon618.jpg',
								text:res.url,
								size: 200,
								dx: 835,
								dy: 1630
							   }
						    ]);
					    	}
					    })
						
					});
				},
				setCanvasWH: ({ bgObj, type, bgScale }) => {
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				},
				setCanvasToTempFilePath: {
					destWidth: 1080,
					destHeight: 1920
				}
			});
			      console.log(d);
			      this.postUrl = d.poster.tempFilePath;
			      // this.openModal();
			      uni.previewImage({
			      	urls: [d.poster.tempFilePath]
			      });
			    break;
			  }
			  case 2:{
				const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				type: 'testShareType',
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				posterCanvasId: 'post', //canvasId
				delayTimeScale: 20, //延时系数
				backgroundImage: 'https://app.aptenon.com/crm/h5_picture/tenon2.jpg',
				drawArray: ({ bgObj, type, bgScale }) => {
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return new Promise((rs, rj) => {
						this.getAgentCode2({
						scence:this.$store.state.user.userInfo.teamNo
					    })
					    .then(res=>{	
					    console.log(res);
					    	if(res&&res.url){
					    	   return rs([
							   {
								type: 'qrcode',
								text:res.url,
								size: 200,
								dx: 800,
								dy: 1630
							   }
						    ]);
					    	}
					    })
						
					});
				},
				setCanvasWH: ({ bgObj, type, bgScale }) => {
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				},
				setCanvasToTempFilePath: {
					destWidth: 1080,
					destHeight: 1920
				}
			});
			      console.log(d);
			      this.postUrl = d.poster.tempFilePath;
			      // this.openModal();
			      uni.previewImage({
			      	urls: [d.poster.tempFilePath]
			      });
			    break;
			  }
			  case 3:{
				  const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				type: 'testShareType',
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				posterCanvasId: 'post', //canvasId
				delayTimeScale: 20, //延时系数
				backgroundImage: 'https://app.aptenon.com/crm/h5_picture/618-A3.jpg',
				drawArray: ({ bgObj, type, bgScale }) => {
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return new Promise((rs, rj) => {
						this.getAgentCode2({
						scence:this.$store.state.user.userInfo.teamNo
					    })
					    .then(res=>{	
					    console.log(res);
					    	if(res&&res.url){
					    	   return rs([
							   {
								type: 'qrcode',
								text:res.url,
								size: 200,
								dx: 800,
								dy: 1630
							   }
						    ]);
					    	}
					    })
						
					});
				},
				setCanvasWH: ({ bgObj, type, bgScale }) => {
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				},
				setCanvasToTempFilePath: {
					destWidth: 1080,
					destHeight: 1920
				}
			});
			      console.log(d);
			      this.postUrl = d.poster.tempFilePath;
			      // this.openModal();
			      uni.previewImage({
			      	urls: [d.poster.tempFilePath]
			      });
			    break;
			  }
			  case 4:{
				  const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				type: 'testShareType',
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				posterCanvasId: 'post', //canvasId
				delayTimeScale: 20, //延时系数
				backgroundImage: 'https://app.aptenon.com/crm/h5_picture/618-A7.jpg',
				drawArray: ({ bgObj, type, bgScale }) => {
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return new Promise((rs, rj) => {
						this.getAgentCode2({
						scence:this.$store.state.user.userInfo.teamNo
					    })
					    .then(res=>{	
					    console.log(res);
					    	if(res&&res.url){
					    	   return rs([
							   {
								type: 'qrcode',
								text:res.url,
								size: 200,
								dx: 800,
								dy: 1630
							   }
						    ]);
					    	}
					    })
						
					});
				},
				setCanvasWH: ({ bgObj, type, bgScale }) => {
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				},
				setCanvasToTempFilePath: {
					destWidth: 1080,
					destHeight: 1920
				}
			});
			      console.log(d);
			      this.postUrl = d.poster.tempFilePath;
			      // this.openModal();
			      uni.previewImage({
			      	urls: [d.poster.tempFilePath]
			      });
			    break;
			  }
			  case 5:{
				  const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				type: 'testShareType',
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				posterCanvasId: 'post', //canvasId
				delayTimeScale: 20, //延时系数
				backgroundImage: 'https://app.aptenon.com/crm/h5_picture/618-A7f.jpg',
				drawArray: ({ bgObj, type, bgScale }) => {
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return new Promise((rs, rj) => {
						this.getAgentCode2({
						scence:this.$store.state.user.userInfo.teamNo
					    })
					    .then(res=>{	
					    console.log(res);
					    	if(res&&res.url){
					    	   return rs([
							   {
								type: 'qrcode',
								text:res.url,
								size: 200,
								dx: 800,
								dy: 1630
							   }
						    ]);
					    	}
					    })
						
					});
				},
				setCanvasWH: ({ bgObj, type, bgScale }) => {
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				},
				setCanvasToTempFilePath: {
					destWidth: 1080,
					destHeight: 1920
				}
			});
			      console.log(d);
			      this.postUrl = d.poster.tempFilePath;
			      // this.openModal();
			      uni.previewImage({
			      	urls: [d.poster.tempFilePath]
			      });
			    break;
			  }
			  case 6:{
				  const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				type: 'testShareType',
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				posterCanvasId: 'post', //canvasId
				delayTimeScale: 20, //延时系数
				backgroundImage: 'https://app.aptenon.com/crm/h5_picture/618-E3.jpg',
				drawArray: ({ bgObj, type, bgScale }) => {
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return new Promise((rs, rj) => {
						this.getAgentCode2({
						scence:this.$store.state.user.userInfo.teamNo
					    })
					    .then(res=>{	
					    console.log(res);
					    	if(res&&res.url){
					    	   return rs([
							   {
								type: 'qrcode',
								text:res.url,
								size: 200,
								dx: 800,
								dy: 1630
							   }
						    ]);
					    	}
					    })
						
					});
				},
				setCanvasWH: ({ bgObj, type, bgScale }) => {
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				},
				setCanvasToTempFilePath: {
					destWidth: 1080,
					destHeight: 1920
				}
			});
			      console.log(d);
			      this.postUrl = d.poster.tempFilePath;
			      // this.openModal();
			      uni.previewImage({
			      	urls: [d.poster.tempFilePath]
			      });
			    break;
			  }
			  case 7:{
				  const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				type: 'testShareType',
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				posterCanvasId: 'post', //canvasId
				delayTimeScale: 20, //延时系数
				backgroundImage: 'https://app.aptenon.com/crm/h5_picture/618-E11.jpg',
				drawArray: ({ bgObj, type, bgScale }) => {
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return new Promise((rs, rj) => {
						this.getAgentCode2({
						scence:this.$store.state.user.userInfo.teamNo
					    })
					    .then(res=>{	
					    console.log(res);
					    	if(res&&res.url){
					    	   return rs([
							   {
								type: 'qrcode',
								text:res.url,
								size: 200,
								dx: 800,
								dy: 1630
							   }
						    ]);
					    	}
					    })
						
					});
				},
				setCanvasWH: ({ bgObj, type, bgScale }) => {
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				},
				setCanvasToTempFilePath: {
					destWidth: 1080,
					destHeight: 1920
				}
			});
			      console.log(d);
			      this.postUrl = d.poster.tempFilePath;
			      // this.openModal();
			      uni.previewImage({
			      	urls: [d.poster.tempFilePath]
			      });
			    break;
			  }
			}
			
		}
	}
};
</script>

<style lang="less">
.canvasCon {
	position: fixed;
	left: 100vw;
}
.agentShareListContainer {
	.action2 {
		width: 210rpx !important;
	}
}
.postModal {
	padding: 12rpx;
	.modalTitle {
		position: relative;
		padding: 12rpx;
		text-align: center;
		font-size: 36rpx;
		.saveBtnCon {
			position: absolute;
			right: 12rpx;
			top: 12rpx;
		}
	}
}
</style>

